<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>餐馆增加</title>
<base href="<%=basePath%>">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>res/tl/js/layui/css/layui.css" media="all">
<style type="text/css">
	body{
		margin:20px 0px;
	}
</style>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>增加餐馆</legend>
	</fieldset>

	<form class="layui-form" action="<%=basePath%>merchant/save" method="post">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">餐馆名称</label>
				<div class="layui-input-inline">
					<input type="text" name="merchant_name" id="merchantName" required
						lay-verify="required" placeholder="餐馆名称" autocomplete="off" maxlength="10"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">餐馆类型</label>
				<div class="layui-input-inline" lay-filter="selFilter">
					<select name="type_id" lay-verify="required" lay-search="" id="typeId">
						<option value="">直接选择或搜索选择</option>
					</select>
				</div>
			</div>
			
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">餐馆电话</label>
				<div class="layui-input-inline">
					<input type="text" name="merchant_phone" id="merchantPhone" required
						lay-verify="required" placeholder="餐馆电话" maxlength="11"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-inline">
				<label class="layui-form-label">是否有效</label>
				<div class="layui-input-inline">
					<select name="isva" lay-verify="required" lay-search="" id="isva">
						<option value="">直接选择或搜索选择</option>
						<option value="0">无效</option>
						<option value="1">有效</option>
					</select>
				</div>
			</div>

		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<div class="layui-upload">
					<label class="layui-form-label">上传图片</label>
					<button type="button" class="layui-btn" id="test1" >上传图片</button>
					<div class="layui-upload-list" style="margin:10px 54%;">
						<img class="layui-upload-img" id="demo1" width="90px" height="90px">
						<p id="demoText" style="width:120px;margin:10px 0px;"></p>
						<input type="hidden" id="picSite" name="pic_site">
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">餐馆地址</label>
				<div class="layui-input-inline">
					<select name="quiz1" lay-filter="business" id="quiz1">
						<option value="">请选择省</option>
						<option value="0">湖南省</option>
						<option value="1">湖北省</option>
						<option value="2">广西省</option>
						<option value="3">浙江省</option>
						<option value="4">河北省</option>
					</select>
				</div>
				<div class="layui-input-inline">
					<select name="quiz2" lay-filter="business" id="quiz2">
						<option value="">请选择市</option>
						<option value="0">益阳市</option>
						<option value="1">杭州市</option>
						<option value="2">重庆市</option>
						<option value="3">长沙市</option>
						<option value="4">株洲市</option>
					</select>
				</div>
				<div class="layui-input-inline">
					<select name="quiz3" lay-filter="business" id="quiz3">
						<option value="">请选择县/区</option>
						<option value="0">天心区</option>
						<option value="1">雨花区</option>
						<option value="2">望城区</option>
					</select>
				</div>
				<input type="hidden" id="merchantSite" name="merchant_site">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">详细地址</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" class="layui-textarea" name="merchant_credit"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">操作人</label>
				<div class="layui-input-inline">
					<input type="text" name="oper" id="oper" required
						lay-verify="required" placeholder="操作人" maxlength="11"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-inline">
					<input type="number" name="sort" id="sort" required
						lay-verify="required" placeholder="排序" maxlength="18"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="submit" class="layui-btn" lay-submit=""
					lay-filter="Add" value="立即增加">
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<script src="<%=basePath%>res/tl/js/layui/layui.js" charset="utf-8"></script>
	<script src="<%=basePath%>js/jquery-1.10.2.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['form', 'upload'], function(){
			  var form = layui.form
			  ,layer = layui.layer
			  ,upload=layui.upload
			  ,$ = layui.$;
			  form.on('submit(Add)',function(){
				  parent.location.reload(); // 父页面刷新
			  });
			  var quiz1 = "";
			  var quiz2 = "";
			  var quiz3 = "";
			  var selectName = "";
			  form.on('select(business)', function(data){
				  selectName = $(data.elem).attr("name");
				  if(selectName == "quiz1"){
					  quiz1 = data.value;
					  $("#quiz2").html("");
				  }else if(selectName == "quiz2"){
					  quiz2 = data.value;
					  $("#quiz3").html("");
				  }else if(selectName == "quiz3"){
					  quiz3 = data.value;
					  $("#merchantSite").val(quiz1+"-"+quiz2+"-"+quiz3);
				  }
				  var data = {"areaPid":data.value,"selectName":selectName}
				//  showArea(data);
			});
			  
		/*查询餐馆类型*/
		var url = "<%=basePath%>merchantType/findAll";
		//var data = null;
		$.post(url,null,function (data) {
			data = data.data;
			for(var i=0;i<data.length;i++){
				$("#typeId").append("<option value="+data[i].type_id+">"+data[i].type_name+"</option>");
				form.render();
			}
		},dataType="JSON");

		var data = {"areaPid":"0","selectName":selectName}
		//showArea(data);
		//普通图片上传
		upload.render({
				elem: '#test1'
				,url: '<%=basePath %>upload/uploadFile'
				,before: function(obj){
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result){
						$('#demo1').attr('src', result); //图片链接（base64）
					});
				}
				,done: function(res){
					//如果上传失败
					if(res.code > 0){
						return layer.msg('上传失败');
					}
					//上传成功
					$("#picSite").val(res.msg);
				}
				,error: function(){
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function(){
						uploadInst.upload();
					});
				}
			});
		
	});
		
		//重新渲染表单
		function renderForm(){
		  layui.use('form', function(){
		   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
		   form.render();
		  });
		 }
		
		function showArea(data){
			var url = "<%=basePath %>fodArea/findByPid";
			$.ajax({
				url:url,
				data:{"areaPid":data.areaPid},
                //dataType:"JSON",
				success:function(msg){
					msg:msg.data;
					for(var i=0;i<msg.length;i++){
						if(data.selectName != ""){
							if(data.selectName == "quiz1"){
								$("#quiz2").append("<option value="+msg[i].area_pid+">"+msg[i].area_name+"</option>");
							}else if(data.selectName == "quiz2"){
								$("#quiz3").append("<option value="+msg[i].area_pid+">"+msg[i].area_name+"</option>");
							}
						}else {
							$("#quiz1").append("<option value="+msg[i].area_pid+">"+msg[i].area_name+"</option>");
						}

					}
					renderForm();//下拉菜单渲染 把内容加载进去
				}
			});
		}
	</script>
</body>
</html>